﻿var ow = ow || {};

(function (ow) {
    
    ow.getResponsiveImageUrl = function (baseUrl) {
        var breakpoint;
        if (window.screen.availWidth < 320) {
            breakpoint = "Phone";
        } else if (window.screen.availWidth < 800) {
            breakpoint = "Tablet";
        } else {
            breakpoint = "Desktop";
        }

        var url = baseUrl + '&b=' + breakpoint;

        if (window.devicePixelRatio)
            url += '&pr=' + window.devicePixelRatio;

        return url;
    };

    ow.responsiveImg = function (options) {
        var attributesString = "";
        for(var attribute in options.attributes) {
            if (options.attributes.hasOwnProperty(attribute)) {
                attributesString += (attribute + '="' + escape(options.attributes[attribute]) + '" ');
            }                
        }

        attributesString += 'src="' + ow.getResponsiveImageUrl(options.url) + '"';
        document.write('<img ' + attributesString + '/>');
    };

    ow.setResponsiveBackgroundImage = function (options) {
        document.getElementById(options.elementId).style.backgroundImage = "url('" + ow.getResponsiveImageUrl(options.url) + "')";
    };    
    
})(ow);
